import React, { useState } from 'react'
/*
  useState:
   -让函数式组件拥有自己的state状态
   -函数只有一个参数,这个参数可以理解为初始状态值
   -useState函数返回一个数组,数组中有两个值,
    值一为状态初始值,值二为有更新state功能的回调函数
*/

export default function App() {
  //利用useState方法给函数式组件添加state
  // const useStateResult = useState(0)
  // console.log(useStateResult)//返回一个数组[0,f()]
  const [count,setCount] = useState(0)
  const [isHot,setIsHot] = useState(true)
  const [person,setPerson] = useState([
    {id:"001",name:"张三"},
    {id:"002",name:"李四"},
    {id:"003",name:"王五"},
    {id:"004",name:"赵六"}
  ])
  // setIsHot(!isHot)
  //如果语句函数内部语句比较少,可以直接写在虚拟DOM上
  const add1 = ()=>{
    setCount(count+1)
  }

  //不能这样添加????
  // setPerson([...person,{id:"005",name:"铁七"}])
  return (
    <div>
      <h2>做累加{count}</h2>
      {/* <button onClick = {()=>{setCount(count+1)}}>控制累加</button> */}
      <button onClick={add1}>点我点我</button>
      <h2>天气相关{isHot?"热热热":"冷冷冷"}</h2>
      <button onClick={()=>{setIsHot(!isHot)}}>天气还得看我</button>
      {
        person.map(item => {
          return <p key={item.id}>{item.name}</p>
        })
      }
    </div>
  )
}
